<script setup>
	import {
		navigateBack
	} from "@/assets/scripts/navigate.js"
	import {
		onMounted,
		ref
	} from "vue";

	const calendarRef = ref()
	const lunar = ref({
		Animal: '',
		IDayCn: '',
		IMonthCn: '',
		Term: '',
		astro: '',
		cDay: '',
		cMonth: '',
		cYear: '',
		gzDay: '',
		gzMonth: '',
		gzYear: '',
		isLeap: '',
		isTerm: '',
		isToday: '',
		lDay: '',
		lMonth: '',
		lYear: '',
		nWeek: '',
		ncWeek: '',
		sWeek: '',
	})

	const xz = {
		'白羊座': '♈',
		'金牛座': '♉',
		'双子座': '♊',
		'巨蟹座': '♋',
		'狮子座': '♌',
		'处女座': '♍',
		'天秤座': '♎',
		'天蝎座': '♏',
		'人马座': '♐',
		'摩羯座': '♑',
		'水瓶座': '♒',
		'双鱼座': '♓',
	}

	onMounted(() => {
		// console.log(calendarRef.value.calendar.lunar);
		lunar.value = calendarRef.value.calendar.lunar
	})

	const change = (e) => {
		lunar.value = e.lunar
	}
</script>

<template>
	<uv-navbar :fixed="false" @leftClick="navigateBack" title="日历"></uv-navbar>

	<view class="bg-grey-fill bg">
		<uv-row class="px-normal pt-normal">
			<uv-col class="bg-white">
				<gwbq-calendar ref="calendarRef" :insert="true" :lunar="true" @change="change" />
			</uv-col>
		</uv-row>

		<view class="pb-normal">
			<uv-row class="px-normal mt-normal">
				<uv-col class="bg-white ">
					<view class="p-normal">
						<view class="font-wb font-fs22 color-red font-family-c">
							{{lunar.IMonthCn}}{{lunar.IDayCn}}
						</view>
						<view class="mt-small color-grey">
							{{lunar.gzYear}}({{lunar.Animal}})年 - {{lunar.gzMonth}}月 - {{lunar.gzDay}}日
						</view>
						<view class="mt-small color-grey font-family-m">
							{{new Date(`${lunar.cYear}-${lunar.cMonth}-${lunar.cDay}`).toDateString()}}
						</view>
						<view class="mt-small d-flex">
							<view class="mr-small">
								{{lunar.astro}}
							</view>
							<view>
								{{xz[lunar.astro]}}
							</view>
						</view>
					</view>
				</uv-col>
			</uv-row>
		</view>
	</view>

</template>

<style lang="scss" scoped>
	.bg {
		background-color: #f5f5f5;
	}

	.font-family-c {
		font-family: cursive;
	}

	.font-family-m {
		font-family: math;
	}

	.color-grey {
		color: #666;
	}

	.color-red {
		color: #de4d3e;
	}
</style>